HTML 样式规则

文件类型

使用 HTML5 。

所有 HTML 文件均应使用 HTML5 （ HTML 语法）： <!DOCTYPE html>

不要结束自结束元素，即编写 <br> ，而不是 <br />。

HTML 有效性

使用有效的 HTML。

使用有效的 HTML 是可测量的基准质量，可确保 HTML的合理使用并有助于了解技术要求和限制。

不推荐：

  1. <title>页面标题</title>
  2. <article>这是一篇文章。

推荐：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>一代人</title>
  6.     </head>
  7.     <body>
  8.         <article>黑夜给了我黑色的眼睛，我却用它来寻找光明。。</article>
  9.     </body>
  10. </html>

语义

根据目的使用 HTML 。

根据元素的预期作用使用元素。例如，针对标题使用标题元素，针对段落使用 p 元素，针对锚点使用 a 元素等。根据目的使用HTML 对提高可访问性、再利用程度和代码效率十分重要。

不推荐：

  1. <div onclick="goToRecommendations();">All recommendations</div>

推荐：

  1. <a href="recommendations/">All recommendations</a>

多媒体应变计划

为多媒体设置备用内容。

确保为图片、视频或通过画布呈现的动画对象等多媒体提供其他访问方式。对于图片而言，使用有意义的 Alt 文本。对于视频，使用音频转述资料和字幕（如有）。

为方便访问，需提供备用内容，若没有 alt 属性，盲人用户将难以辨别图片的内容，其他用户也可能无法理解视频或音频的内容。

针对具有会引入冗余的 alt 属性的图片和无法立即使用 CSS 的装饰性图片，使用空备用内容，即 alt="" 。

不推荐：

  1. <img src="udacity.png">

推荐：

  1. <img src="udacity.png" alt="Udacity logo">

关注点分离

将结构、描述和行为相互分离。

将结构（标记）、描述（样式）和行为（脚本设计）严格分开，将三者间可能发生的相互作用降至最低。

也就是说，确保文件和模板仅含有 只用于结构目的 HTML 。将所有描述性事物移至样式表，将所有行为性事物移至脚本。此外，尽可能少地连接文件和模板中的样式表和脚本，以便使接触面积最小化。

将结构、描述和行为相互分离对维护十分重要。相比对样式表和脚本进行更新，更改 HTML 文件和模板的成本往往更高。

实体引用

不要使用实体引用。

若文件、编辑器和小组之间均使用同样的编码（ UTF-8 ），则无需使用 — 、” 和 or &# x263a; 等实体引用。

只有 HTML 中含有特殊意义的字符（如 < 和 &）以及控制和“隐式”字符除外。

不推荐：

  1. 欧元的货币符号是： “&eur;”

推荐：

  1. 欧元的货币符号是： “€”

类型属性

忽略样式表和脚本的 type 属性。

不要针对样式表和脚本使用 type 属性。因为 HTML 已经默认设置了 text/css 和 text/javascript ，所以在此类语境中无需设置 type 属性。

在老式浏览器中，也可以安全进行此项操作。

不推荐：

  1. <link rel="stylesheet" type="text/css" href="css/style.css">
  2. <script src="js/app.js" type="text/javascript"></script>

推荐：

  1. <link rel="stylesheet" href="css/style.css">
  2. <script src="js/app.js"></script>